<template>
	<view class="content">
		<u-sticky>
			<view class="header" style="">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#fff"
					inactive-color="#fff" bg-color="#262626" :bar-style="barStyle">
				</u-tabs>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="shuoming_box" @tap="smBtn">
				<view class="shuoming_box1">
					<image src="https://mh.qingfentool.vip/upload/image/20230223/293c767a8661499634779d760f194194.png"
						mode="">
					</image>
				</view>
			</view>
			<!-- #endif -->
		</u-sticky>

		<template v-if="weishiyongList.length > 0">
			<view v-if="current == 0" class="bottom_big_box" v-for="(item, index) in weishiyongList" :key="index">
				<image v-if="boxtype==1" src="https://mh.qingfentool.vip/upload/image/20230523/6d939386eee9be04078b9788f2dd03f6.png" mode="" @tap="qufanhui">
				</image>
				<image  v-if="boxtype==2" src="https://new.qingfentool.vip/upload/image/20230713/5fb4f37c8ffe5e59dbd5ac883847bf52.png" mode="">
				</image>
				<!-- <view class="big_txt_box">
					{{item.card_name}}
				</view> -->
				<view  v-if="boxtype==1" class="bot_txt">
					{{ item.desc }}
				</view>
				<view  v-if="boxtype==1" class="bot_txt2">
					有效期：
					<text>{{ item.begin_time | formatDate('-') }}</text>—
					<text>{{ item.end_time | formatDate('-') }}</text>
				</view>
			</view>
		</template>
		<template v-if="yishiyongList.length > 0">
			<view v-if="current == 1" class="bottom_big_box" v-for="(item, index) in yishiyongList" :key="index">
				<image v-if="boxtype==1" src="https://mh.qingfentool.vip/upload/image/20230523/6d939386eee9be04078b9788f2dd03f6.png" mode="">
				</image>
				<image  v-if="boxtype==2" src="https://new.qingfentool.vip/upload/image/20230713/5fb4f37c8ffe5e59dbd5ac883847bf52.png" mode="">
				</image>
				<!-- <view class="big_txt_box" style="left: 20rpx;top: 89rpx;">
					{{item.card_name}}
				</view> -->
				<view  v-if="boxtype==1" class="bot_txt" style="text-align: left; left: 18rpx;bottom: 10rpx;color: #fff;">
					{{ item.desc }}
				</view>
				<view  v-if="boxtype==1" class="bot_txt2" style="left: 18rpx;top: 10rpx;color: #fff;">
					有效期：
					<text>{{ item.begin_time | formatDate('-') }}</text>—
					<text>{{ item.end_time | formatDate('-') }}</text>
				</view>
				<view  v-if="boxtype==1" class="bot_txt2" style="left: 200rpx;top: 140rpx;width: 100%;color: #fff;">
					编号：{{ item.card_num }}
				</view>
			</view>
		</template>
		<template v-if="yiguoqi.length > 0">
			<view v-if="current == 2" class="bottom_big_box" v-for="(item, index) in yiguoqi" :key="index">
				<image v-if="boxtype==1" src="https://mh.qingfentool.vip/upload/image/20230523/6d939386eee9be04078b9788f2dd03f6.png" mode="">
				</image>
				<image  v-if="boxtype==2" src="https://new.qingfentool.vip/upload/image/20230713/5fb4f37c8ffe5e59dbd5ac883847bf52.png" mode="">
				</image>
				<!-- <view class="big_txt_box" style="left: 20rpx;top: 89rpx;">
					{{item.card_name}}
				</view> -->
				<view  v-if="boxtype==1" class="bot_txt" style="text-align: left; left: 18rpx;bottom: 16rpx;color: #fff(10,10,10,0.28);">
					{{ item.desc }}
				</view>
				<view  v-if="boxtype==1" class="bot_txt2" style="left: 18rpx;top: 10rpx;color: rgba(10,10,10,0.28);">
					有效期：
					<text>{{ item.begin_time | formatDate('-') }}</text>—
					<text>{{ item.end_time | formatDate('-') }}</text>
				</view>
			</view>
		</template>
		<template v-if="weishiyongList.length == 0 && num == 1">
			<view class="wudaoju_box">
				<image src="https://mh.qingfentool.vip/upload/image/20230523/3531a120aff7107211dbf217266174d5.png" mode="">
				</image>
				<view v-if="boxtype ==1" class="text">暂无反悔卡</view>
				<view v-if="boxtype ==2" class="text">暂无加倍卡</view>
			</view>
		</template>
		<template v-if="yishiyongList.length == 0 && num == 2">
			<view class="wudaoju_box">
				<image src="https://mh.qingfentool.vip/upload/image/20230523/3531a120aff7107211dbf217266174d5.png" mode="">
				</image>
				<view v-if="boxtype ==1" class="text">暂无反悔卡</view>
				<view v-if="boxtype ==2" class="text">暂无加倍卡</view>
			</view>
		</template>
		<template v-if="yiguoqi.length == 0 && num == 3">
			<view class="wudaoju_box">
				<image src="https://mh.qingfentool.vip/upload/image/20230523/3531a120aff7107211dbf217266174d5.png" mode="">
				</image>
				<view v-if="boxtype ==1" class="text">暂无反悔卡</view>
				<view v-if="boxtype ==2" class="text">暂无加倍卡</view>
			</view>
		</template>

	</view>
</template>

<script>
export default {
	data() {
		return {

			barStyle: {
				backgroundColor: '#FFC87D'
			},
			num: '',
			list: [{
				name: '未使用'
			},
			{
				name: '已使用'
			},
			{
				name: '已过期'
			}
			],

			current: 0,
			weishiyongList: [],
			yishiyongList: [],
			yiguoqi: [],
			boxtype: ''
		}
	},
	filters: {
		// 时间戳处理
		formatDate: function (value, spe = '/') {
			value = value * 1000
			let data = new Date(value);
			let year = data.getFullYear();
			let month = data.getMonth() + 1;
			let day = data.getDate();
			let h = data.getHours();
			let mm = data.getMinutes();
			let s = data.getSeconds();
			month = month >= 10 ? month : "0" + month;
			day = day >= 10 ? day : "0" + day;
			h = h >= 10 ? h : "0" + h;
			mm = mm >= 10 ? mm : "0" + mm;
			return `${year}${spe}${month}${spe}${day}`;
		}
	},
	onLoad(e) {
		this.boxtype = e.type
		console.log(this.boxtype)
	},
	onShow() {
		this.getlist()
	},
	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: '/userPage/user/daojusm?id=' + 16
		})
	},
	methods: {
		qufanhui() {
			uni.navigateTo({
				url: '/userPage/user/order/fhym'
			})
		},
		// 说明
		smBtn() {
			uni.navigateTo({
				url: '/userPage/user/daojusm?id=' + 16
			})
		},
		// 返回
		goback() {
			uni.navigateBack()
		},
		change(index) {
			////console.log(index)
			this.current = index
			this.orderlist = []
			this.page = 1
			this.getlist()
		},
		getlist() {
			console.log(this.boxtype)
			if (this.boxtype == 1) {
				let data = {
					status: '0'
				}
				let data1 = {
					status: '1'
				}
				let data2 = {
					status: '2'
				}
				if (this.current == 0) {
					this.$Request.post(this.$api.user.getCardByStatus, data).then(res => {
						this.num = 1
						this.weishiyongList = res.data
						////console.log(this.weishiyongList, "未使用")
					})
				} else if (this.current == 1) {
					this.$Request.post(this.$api.user.getCardByStatus, data1).then(res => {
						this.yishiyongList = res.data
						this.num = 2
						////console.log(res, "已使用")
					})
				} else {
					this.$Request.post(this.$api.user.getCardByStatus, data2).then(res => {
						this.num = 3
						////console.log(res, "已过期")
						this.yiguoqi = res.data
					})
				}

			} else if (this.boxtype == 2) {
				let data = {
					status: 1
				}
				let data1 = {
					status: 2
				}
				let data2 = {
					status: 3
				}
				if (this.current == 0) {
					this.$Request.get(this.$api.user.getSpeedCard, data).then(res => {
						this.num = 1
						this.weishiyongList = res.data
					})
				} else if (this.current == 1) {
					this.$Request.get(this.$api.user.getSpeedCard, data1).then(res => {
						this.yishiyongList = res.data
						this.num = 2
					})
				} else {
					this.$Request.get(this.$api.user.getSpeedCard, data2).then(res => {
						this.num = 3
						this.yiguoqi = res.data
					})
				}

			}else{
				return
			}

		},
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	min-height: 100vh;
	background: #262626;

	// padding-bottom: 20rpx;
	// .header {
	// 	width: 100%;
	// }

	/* #ifdef MP-WEIXIN */
	.shuoming_box {
		width: 100%;
		height: 49rpx;
		padding-right: 20rpx;
		background-color: #262626;

		.shuoming_box1 {
			width: 49rpx;
			height: 49rpx;
			float: right;

			image {
				width: 100%;
				height: 100%;
			}
		}


	}

	/* #endif */
	.bottom_big_box {
		height: 256rpx;
		width: 94%;
		position: relative;
		margin: auto;
		margin-bottom: 23rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.big_txt_box {
			position: absolute;
			left: 200rpx;
			top: 57rpx;
			width: 256rpx;
			height: 110rpx;
			// color: #9076FF;
			font-weight: 900;
			font-size: 80rpx;
			line-height: 110rpx;
			text-align: center;
		}

		.bot_txt {
			width: 360rpx;
			height: 30rpx;
			text-align: center;
			line-height: 30rpx;
			color: #fff;
			font-size: 20rpx;
			position: absolute;
			left: 182rpx;
			bottom: 30rpx;
		}

		.bot_txt2 {
			width: 360rpx;
			height: 30rpx;
			line-height: 30rpx;
			color: #fff;
			font-size: 20rpx;
			position: absolute;
			left: 182rpx;
			bottom: 10rpx
		}
	}

	.wudaoju_box {
		width: 500rpx;
		height: 400rpx;
		margin: auto;

		image {
			width: 100%;
			margin-top: 150rpx;
			height: 100%;
		}

		.text {
			color: #fff;
			width: 100%;
			text-align: center;
		}
	}
}
</style>